import {ref, Ref, ComputedRef, unref, computed, watch, toRaw, h, ComponentInternalInstance} from 'vue';
import {isEqual, cloneDeep} from 'lodash-es';
import {NDatePicker, NInput, NSelect, NSpace} from "naive-ui";
import {filterRenderType} from "@/components/Table/src/enum/filterRenderType";

export function useColumns(propsRef: ComputedRef<any>, setLoading) {
    const columnsRef = ref(unref(propsRef).columns) as unknown as Ref<any[]>;

    let cacheColumns = unref(propsRef).columns;

    const withFilterCol = ref(unref(propsRef).columns)

    const getColumnsRef = computed(() => {
        const columns = cloneDeep(unref(columnsRef));
        if (!columns) return [];
        return columns;
    });

    function setColumnsRef(columns: any) {
        withFilterCol.value = cloneDeep(unref(columns))
    }

    function setFilterChange(key,value) {
        // 这种方法（全更新）太吃性能，改为精准更新
        // setColumnsRef(getColumnsHandle)
        withFilterCol.value = withFilterCol.value.map(item => {
            if (item.key === key) {
                item.filterOptionValue = value
            }
            return item
        })
    }

    function clearFilterOptionValue() {
        withFilterCol.value.map(item => {
            if (item.filter) {
                item.filterOptionValue = null
            }
        })
    }
    function clearSortOptionValue() {
        withFilterCol.value.map(item => {
            if (item.sorter) {
                item.sortOrder = false
            }
        })
    }

    const getColumnsHandle = computed(() => {
        return withFilterCol.value.map(item => {
            if (item.filterType) {
                item.filter = true;
                if (item.filterType === filterRenderType.INPUT && !item.renderFilterMenu) {
                    item.renderFilterMenu = ({hide}) => {
                        return h(
                            NSpace,
                            {style: {padding: '12px'}, vertical: true},
                            {
                                default: () => [
                                    h(
                                        NInput, {
                                            defaultValue: item.filterOptionValue,
                                            clearable: true,
                                            placeholder: item.placeholder ? item.placeholder : `请输入${item.title}`,
                                            onBlur: function ($event: any) {
                                                if($event.target.value){
                                                    item.filterOptionValue = $event.target.value
                                                    setFilterChange(item.key,$event.target.value)
                                                }
                                                    hide()
                                            },
                                            onClear: function ($event: any) {
                                                setTimeout(()=>{
                                                    item.filterOptionValue = null;
                                                    setFilterChange(item.key,null);
                                                    hide()
                                                },100)
                                            },
                                            onKeydown: function ($event: any) {
                                                if ($event.keyCode === 13 && $event.target.value) {
                                                    item.filterOptionValue = $event.target.value
                                                    setFilterChange(item.key,$event.target.value)
                                                    hide()
                                                }

                                            },
                                        },
                                    )
                                ]
                            }
                        )
                    }
                } else if (item.filterType === filterRenderType.SINGLESELECT && !item.renderFilterMenu) {
                    item.renderFilterMenu = ({hide}) => {
                        return h(
                            NSpace,
                            {style: {padding: '12px'}, vertical: true},
                            {
                                default: () => [
                                    h(
                                        NSelect, {
                                            style: {width: '200px'},
                                            defaultValue: item.filterOptionValue,
                                            options: item.filterOptions,
                                            multiple: item.filterMultiple,
                                            clearable: true,
                                            placeholder: item.placeholder ? item.placeholder : `请输入${item.title}`,
                                            onUpdateValue: (value) => {
                                                item.filterOptionValue = value
                                                !item.filterMultiple ? setFilterChange(item.key,value) : ''
                                                !item.filterMultiple ? hide() : ''
                                            },
                                            onBlur: function () {
                                                item.filterMultiple ?  setFilterChange(item.key,null) : ''
                                                item.filterMultiple ? hide() : ''
                                            },
                                            onClear: function () {
                                                item.filterOptionValue = null;
                                                item.filterMultiple ?  setFilterChange(item.key,null) : ''
                                                item.filterMultiple ? hide() : ''
                                            },
                                        }
                                    )
                                ]
                            }
                        )
                    }
                }else if(item.filterType === filterRenderType.DATERANGEPICKER && !item.renderFilterMenu){
                    item.renderFilterMenu = ({hide}) => {
                        return h(
                            NSpace,
                            {style: {padding: '12px'}, vertical: true},
                            {
                                default: () => [
                                    h(
                                        NDatePicker, {
                                            style: {width: '300px'},
                                            defaultValue: item.filterOptionValue,
                                            type:"daterange",
                                            clearable: true,
                                            onUpdateValue: (value) => {
                                                item.filterOptionValue = value
                                                setFilterChange(item.key,value)
                                                hide()
                                            },
                                            onClear: function () {
                                                item.filterOptionValue = null;
                                                setFilterChange(item.key,null)
                                                hide()
                                            },
                                        }
                                    )
                                ]
                            }
                        )
                    }
                }
            }
            return item;
        })
    });

    watch(
        () => unref(propsRef).columns,
        (columns) => {
            columnsRef.value = columns;
            cacheColumns = columns;
        }
    );

    return {
        getColumnsRef,
        getColumnsHandle,
        withFilterCol,
        clearFilterOptionValue,
        clearSortOptionValue
    };
}
